<!DOCTYPE html>
<html lang="zh">
<head>
  <title>选项卡</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <link rel="stylesheet" href="../../../lib/ionic/css/ionic.min.css">
</head>
<body ng-app="starter">
  <ion-nav-bar class="bar-stable" align-title="center">
    <ion-nav-back-button></ion-nav-back-button>
  </ion-nav-bar>

  <!--渲染选项卡视图的容器-->
  <ion-nav-view></ion-nav-view>

  <script src="../../../lib/ionic/js/ionic.bundle.js"></script>
  <script src="../../../js/app.js"></script>
  <script>
    //NOTE 路由配置使用config，而非controller
    angular.module("starter", ["ionic"]).config(function ($stateProvider, $urlRouterProvider) {
      $stateProvider
      //配置选项卡tabs
      .state("tabs", {
        url: "/tabs",
        //设置为一个抽象的状态机
        abstract: true,
        templateUrl: "template/tabs.html"
      })
      //通过这种写法指定为子状态机
      .state("tabs.dash", {
        url: "/tabs/dash",
        views: {
          "tab-dash": {
            templateUrl: "template/tab-dash.html"
          }
        }
      })
      .state("tabs.chats", {
        url: "/tabs/chats",
        views: {
          "tab-chats": {
            templateUrl: "template/tab-chats.html"
          }
        }
      })
      .state("tabs.account", {
        url: "/tabs/account",
        views: {
          "tab-account": {
            templateUrl: "template/tab-account.html"
          }
        }
      });
      //为子状态时，这里需要这样写
      $urlRouterProvider.otherwise("/tabs/dash");
    });

  </script>

  <!--NOTE 使用$ionic服务管理历史记录
  method $ionicHistory.viewHistory() 返回视图访问历史数据
  method $ionicHistory.currentView() 返回当前视图对象
  method $ionicHistory.currentHistoryId()
  method $ionicHistory.currentTitle(val?: str) 读写当前视图的标题
  method $ionicHistory.backView() 返回前一个视图对象
  method $ionicHistory.backTitle()
  method $ionicHistory.forwardView()
  method $ionicHistory.forwardTitle()
  method $ionicHistory.goBack()
  method $ionicHistory.clearHistory()
  method $ionicHistory.clearCache()
  method $ionicHistory.nextViewOptions(options?: object) 设置后续视图切换选项
    disableAnimate bool 在后续的转场中禁止动画
    disableBack bool 后续的视图将不能回退
    historyRoot bool 下一个视图将会作为历史栈的根节点
  -->
</body>
</html>
